<template>
	<view>
		
		<view class="appointment">
		    <block v-for="(lecturer, index) in lecturer" :key="index" >
		        <navigator @click="toggleSelection(lecturer.userId,lecturer.headImgUrl)" url="url" class="mod-item"  
						:class="{ 'selected-style': selectedItems.includes(lecturer.userId) }" :id="lecturer.userId">
		            <view class="mod-img">
		                <image :src="lecturer.headImgUrl" mode="widthFix" class="mod-image"></image>
		            </view>
		            <view class="mod-title">
		                <text>{{ lecturer.name }}</text>
		            </view>
		        </navigator>
		    </block>
		</view>
		
		
		<view class="add-wrap" @click="qingkong">
		    <text style="color: white;font-size:smaller;">重置</text>
		</view>
		<view class="add-wrap2">
		    <text style="color: white;font-size:smaller;">已选择:({{this.selectedItems.length}}/10)</text>
		</view>
		<view class="add-wrap3" @click="queding">
		    <text style="color: white;font-size:smaller;">确认</text>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	var urlPrefix = app.globalData.urlPrefix;
	export default {
		data() {
			return {
				lecturer: [],
				selectedItems: [],
				dataUrlAll:[]
			}
		},
		onLoad(options) {
			var token = uni.getStorageSync('token')
			let dataid = uni.getStorageSync('chooseAlecturer')
			let url = uni.getStorageSync('chooseAlecturerUrl')
			if(dataid.length>0){
					this.selectedItems = dataid.slice();
			}
			if(url.length>0){
					this.dataUrlAll = url.slice();
			}
		
		
			this.token = token;
			uni.showLoading({
			      title: '加载中',
			});
		    let that = this;
		    uni.request({
		        url: urlPrefix + '/api/applet/userToLecturer/chooseATeacher',
		        data: {},
		        method: 'GET',
		        header: {
		            'content-type': 'application/json',
		            'token': this.token
		        },
		        success: function (suss) {
		            let dataList = suss.data;
		            that.setData({
		                lecturer: dataList.datas
		            });
					uni.hideLoading();
		        }
		    });
		},
		methods: {
			toggleSelection(index,headImgUrl) {
			      const selectedIndex = this.selectedItems.indexOf(index);
			      const selectedIndex2 = this.selectedItems.indexOf(headImgUrl);
			      if (selectedIndex === -1) {
					if(this.selectedItems.length == 10){
						uni.showToast({
						    title: '讲师数量已达到10个',
						    icon: 'none',
						    duration: 2000
						});
						return;
					}else{
							
						  this.dataUrlAll.push(headImgUrl)	
							
						  this.selectedItems.push(index);
					}
			      } else {
			         this.selectedItems.splice(selectedIndex, 1);
					 this.dataUrlAll.splice(selectedIndex2,1)	
			      }
				  
				 uni.setStorageSync('chooseAlecturer', this.selectedItems);
				 uni.setStorageSync('chooseAlecturerUrl', this.dataUrlAll);
				
			},
			
			
			qingkong: function (e) {
			   this.selectedItems=[];
			   this.dataUrlAll=[];
			    uni.removeStorageSync('chooseAlecturer');
			    uni.removeStorageSync('chooseAlecturerUrl');
			},
			
			queding: function (e) {
				if(this.selectedItems.length != 10){
					uni.showToast({
					    title: '当前指定讲师不足10位',
					    icon: 'none',
					    duration: 2000
					});
					return
				}
				// 返回上一页
				uni.navigateBack({
				    delta: 1 // 默认值是1，表示返回的页面层数
				});
				
			}
				
				
		}
	}
</script>

<style lang="scss">

@import './chooseAteacher.scss';
</style>
